<div class="circle">
  <svg width="1200" height="600" class="circle__svg">
    <rect x="10" y="10" width="200" height="20" stroke="black" fill="none" stroke-width="5">
      <animate
        attributeName="width"
        attributeType="XML"
        from="100" to="20"
        begin="0s" dur="2s"
        fill="freeze" />
  </rect>
  <path d="M150,200 a150,150 0 1,0 150,-150"  fill="none"  stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"  fill="yellow" stroke="blue" stroke-width="5" />

<path d="M600,350 l 50,-25 
     a25,25 -30 0,1 50,-25 l 50,-25 
     a25,50 -30 0,1 50,-25 l 50,-25 
     a25,75 -30 0,1 50,-25 l 50,-25 
     a25,100 -30 0,1 50,-25 l 50,-25"
  fill="none" stroke="red" stroke-width="5"  />


  </svg>

</div>